<template>
  <div class="container-content">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-form-item label-width="200px" label="创建组织">
        <el-input
          v-model="formData.deptName"
          placeholder="请输入创建组织"
          clearable
          disabled
          :style="{ width: '100%' }"
          suffix-icon="el-icon-search"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="银行账号">
        <el-input
          v-model="formData.account"
          placeholder="请输入银行账号"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="账户名称">
        <el-input
          v-model="formData.title"
          placeholder="请输入账号名称"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="账户收支属性">
        <el-input
          v-model="formData.inOrOut"
          placeholder="请输入账户收支属性"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="币别">
        <el-input
          v-model="formData.currencyName"
          placeholder="请输入币别"
          clearable
          :style="{ width: '100%' }"
          suffix-icon="el-icon-search"
          @focus="openList('币别')"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="账号类型">
        <el-select
          v-model="formData.accountType"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option label="银行账户" value="0"> </el-option>
          <el-option label="微信账户" value="1"> </el-option>
          <el-option label="支付宝账户" value="2"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="200px" label="备注">
        <el-input
          v-model="formData.remarks"
          placeholder="请输入备注"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="开户银行">
        <el-input
          v-model="formData.bankName"
          placeholder="请输入开户银行"
          clearable
          :style="{ width: '100%' }"
          suffix-icon="el-icon-search"
          @focus="openList('开户银行')"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="开户银行账户">
        <el-input
          v-model="formData.account"
          placeholder="请输入开户银行账户"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="开户银行地址">
        <el-input
          v-model="formData.address"
          placeholder="请输入开户银行地址"
          clearable
          disabled
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="账号地区码">
        <el-input
          v-model="formData.regionCode"
          placeholder="请输入账号地区码"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="账户地区名">
        <el-input
          v-model="formData.regionName"
          placeholder="请输入账户地区名"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="国别">
        <el-input
          v-model="formData.countryName"
          placeholder="请输入国别"
          clearable
          :style="{ width: '100%' }"
          suffix-icon="el-icon-search"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="省">
        <el-input
          v-model="formData.provinceName"
          placeholder="请输入省"
          clearable
          :style="{ width: '100%' }"
          suffix-icon="el-icon-search"
          @focus="openList('省')"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="市">
        <el-input
          v-model="formData.cityName"
          placeholder="请输入市"
          clearable
          :style="{ width: '100%' }"
          suffix-icon="el-icon-search"
          @focus="openList('市')"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="区">
        <el-input
          v-model="formData.countyName"
          placeholder="请输入区"
          clearable
          :style="{ width: '100%' }"
          suffix-icon="el-icon-search"
          @focus="openList('区')"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px">
        <el-radio v-model="formData.overdraftStrategy" label="1"
          >禁止透支</el-radio
        >
        <el-radio v-model="formData.overdraftStrategy" label="2"
          >额度内允许透支</el-radio
        >
      </el-form-item>

      <el-form-item label-width="200px" label="透支额度">
        <el-input
          v-model="formData.lineCredit"
          placeholder="请输入透支额度"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :append-to-body="list"
      width="60%"
    >
      <el-table :data="gridData"  @row-dblclick="getRow" v-if="title == '币别'">
        <el-table-column property="currencyName" label="名称"></el-table-column>
        <el-table-column
          property="currencySymbol"
          label="简称"
        ></el-table-column>
        <el-table-column property="code" label="编码"></el-table-column>
        <el-table-column
          property="updateTime"
          label="修改时间"
        ></el-table-column>
      </el-table>
      <el-table :data="gridData"  @row-dblclick="getRow" v-if="title == '开户银行'">
        <el-table-column property="code" label="编码"></el-table-column>
        <el-table-column property="title" label="名称"></el-table-column>
        <el-table-column
          property="bankAddress"
          label="银行地址"
        ></el-table-column>
        <el-table-column property="bankDesc" label="开户银行"></el-table-column>
      </el-table>
      <el-table :data="gridData"  @row-dblclick="getRow" v-if="title == '国家'">
        <el-table-column property="wareName" label="名称"></el-table-column>
        <el-table-column property="wareCode" label="编码"></el-table-column>
        <el-table-column property="userId" label="创建人"></el-table-column>
        <el-table-column
          property="wareManagement"
          label="仓管id"
        ></el-table-column>
      </el-table>
      <el-table :data="gridData"  @row-dblclick="getRow" v-if="title == '省'">
        <el-table-column property="areaName" label="名称"></el-table-column>
        <el-table-column property="id" label="编码"></el-table-column>
      </el-table>
      <el-table :data="gridData"  @row-dblclick="getRow" v-if="title == '市'">
        <el-table-column
          property="areaName"
          label="名称"
        ></el-table-column>
        <el-table-column property="id" label="编码"></el-table-column>
      </el-table>
      <el-table :data="gridData"  @row-dblclick="getRow" v-if="title == '区'">
        <el-table-column property="id" label="编码"></el-table-column>
        <el-table-column property="areaName" label="名称"></el-table-column>
      </el-table>
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="table-pagination"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
      >
      </el-pagination> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { add } from "@/api/base/data";
import {
  updataKingBankAccountList,
  editKingBankAccountList,
  getKingBaseCurrencyList,
  getKingBaseBankList,
  getAreaList,
} from "@/api/bim/outher";
export default {
  components: {},
  props: ["id"],
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      gridData: [],
      list: true,
      title: "",
      dialogVisible: false,
      flag: false,
      formData: {
        bankCode: undefined,
        bankTitle: undefined,
        id: "",
        deptId: sessionStorage.getItem("userCode"),
        deptName: sessionStorage.getItem("userName"),
        countryId: "20230705392153575054249984",
        countryName: "中国",
      },
      rules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        bankTitle: [
          {
            required: true,
            message: "请输入银行名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    if (this.id != "") {
      updataKingBankAccountList(this.id).then((res) => {
        this.formData = res.data;
        this.formData.countryId="20230705392153575054249984",
        this.formData.countryName="中国",
        this.flag = true;
      });
    }
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    // 点击打开弹窗
    openList(val) {
      this.title = val;
      this.dialogVisible = true;
      console.log(val);

      if (val == "币别") {
        getKingBaseCurrencyList().then((res) => {
          this.gridData = res.rows;
        });
      } else if (val == "开户银行") {
        getKingBaseBankList().then((res) => {
          this.gridData = res.rows;
        });
      } else if (val == "省") {
        getAreaList({
             parentId: "20230705392153575054249984",

              }).then((res) => {
          this.gridData = res.rows;
        });
      } else if (val == "市") {
        getAreaList({ parentId: this.formData.provinceId }).then((res) => {
          this.gridData = res.rows;
        });
      } else if (val == "区") {
        getAreaList({ parentId: this.formData.cityId }).then((res) => {
          this.gridData = res.rows;
        });
      }
    },
    // 点击表格
    getRow(row) {
        this.dialogVisible=false
      if (this.title == "币别") {
        this.formData.currencyCode=row.code
        this.formData.currencyName=row.currencyName
      } else if (this.title == "开户银行") {
        this.formData.bankCode=row.code
        this.formData.bankName=row.code
        this.formData.address=row.bankAddress
      } else if (this.title == "省") {
        this.formData.provinceId = row.id;
        this.formData.provinceName = row.areaName;
      } else if (this.title == "市") {
        this.formData.cityId = row.id;
        this.formData.cityName = row.areaName;
      } else if (this.title == "区") {
        this.formData.countyId = row.id;
        this.formData.countyName = row.areaName;
      }
    },
    submitForm(cb) {
      if (this.flag) {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
          editKingBankAccountList(this.formData, "KingBankAccount").then(
            (res) => {
              if (res.code === 200) {
                cb();
                this.$message.success("修改成功");
                this.flag = false;
              }
            }
          );
        });
      } else {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
          add(this.formData, "KingBankAccount").then((res) => {
            if (res.code === 200) {
              cb();
              this.$message.success("新增成功");
            }
          });
        });
      }
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style></style>
